<template>
  <div class="page_padding">
    <MyNavBar :title="title" @goback="goback" />
    <div class="content">
      <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getNeedDeals"> -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" v-if="eventList.length > 0">
        <div class="event_list" v-for="item in eventList" :key="item.needDealId" @click="goDetail(item)">
          <div class="event_list_info">
            <div class="event_list_info_title">
              {{ item.needDealName }}
            </div>
            <div class="event_list_info_label">
              <span class="event_label">{{ item.busSign }}</span>
              <span class="event_label_back" v-if="item.tags">{{ item.tags }}</span>
              <span class="event_time" v-if="['01-01', '01-02', '01-03'].includes(item.busSignId)">
                {{ item.showStartTime }}
                <span>-</span>
                {{ item.showEndTime }}
              </span>
              <span class="event_time" v-else>
                {{ item.showStartTime }}
              </span>
            </div>
          </div>
          <div class="iconfont icon-yiwancheng"></div>
        </div>
      </van-list>
      <van-empty description="暂无数据" v-else></van-empty>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import { listNeedDeals } from '@api/api.js'
export default {
  name: 'EventsHandled',
  components: { MyNavBar },
  props: {},
  data() {
    return {
      title: '已办事项', // 待办变量
      eventList: [],
      currentPage: '1',
      pageSize: 1000,
      eventListTotal: 0,
      loading: false,
      finished: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getNeedDeals()
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    goHome() {
      this.$router.go(-1)
    },
    // 获取待办列表方法
    getNeedDeals() {
      listNeedDeals({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        param: '1',
      }).then(res => {
        const data = res.data
        this.eventList.push(...data.content)
        this.eventListTotal = data.totalSize
        // this.currentPage++
        this.loading = false
        this.finished = true
        // if (this.eventList.length === this.eventListTotal) {
        //   this.finished = true
        // }
      })
    },
    goDetail(item) {
      if (['会议管理'].includes(item.busSign)) {
        this.$toast.fail('请前往PC端进行相关操作')
        return
      }
      if (['weekend_duty', '16-01'].includes(item.busSignId)) {
        this.$dialog
          .alert({
            message: '请前往PC端进行相关操作',
          })
          .then(res => {})
        return
      }
      this.$store.state.alive = true
      this.$router.push({
        path: item.url,
        query: {
          isEnd: true,
          needDealStatus: item.needDealStatus,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 16px;
  height: 100%;
  .event_list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 12px;
    border-bottom: solid 1px #efefef;
    .event_list_info {
      flex: 1;
      width: calc(100% - 50px);
      .event_list_info_title {
        color: #333333;
        height: 26px;
        line-height: 26px;
        margin-bottom: 5px;
        @include ellipsis;
      }

      .event_list_info_label {
        color: #999999;
        display: flex;
        align-items: center;

        .event_label {
          background-color: #fdeed7;
          border-radius: 4px;
          padding: 2px 7px;
          font-size: 12px;
          color: #86642c;
        }

        .event_time {
          font-size: 12px;
          padding-left: 6px;
          margin-left: 6px;
          border-left: 1px solid #999999;
        }
        .event_label_back {
          background-color: #d9001b;
          border-radius: 4px;
          padding: 2px 7px;
          font-size: 12px;
          color: #fff;
          margin-left: 6px;
        }
      }
    }

    .iconfont {
      font-size: 40px;
      color: #666666;
      width: 40px;
      min-width: 40px;
      margin-left: 10px;
    }
  }
  .my_empty {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .bottom-button {
      width: 400px;
      height: 100px;
    }
  }
}
</style>
